<template>
  <div class="table-view">

    <!-- 按钮区域 -->
    <el-row
      type="flex"
      class="row-bg button-tab"
      justify="space-between">
      <el-row>
        <el-button type="primary" @click="addRole">添加角色</el-button>
      </el-row>
      <el-input
        v-model="input"
        suffix-icon="el-icon-search"
        placeholder="请输入内容"
        class="search-input">
      </el-input>
    </el-row>

    <!-- 表单区域 -->
    <el-table
      style="width: 100%"
      height="580px"
      :data="pop.tableData"
      @selection-change="handleSelectionChange">

      <!-- 功能名称 -->
      <el-table-column
        prop="address"
        label="功能名称">
      </el-table-column>

      <!-- 描述 -->
      <el-table-column
        prop="address"
        label="描述">
      </el-table-column>

      <!-- 接口地址 -->
      <el-table-column
        prop="address"
        label="接口地址">
      </el-table-column>

      <!-- 创建者 -->
      <el-table-column
        prop="address"
        label="创建者">
      </el-table-column>

      <!-- 操作 -->
      <el-table-column
        label="操作">
        <template slot-scope="scope">
          <el-button
            @click="handleDelete(scope.$index)"
            type="text" size="medium"
            style="font-weight: 400">
            删除
          </el-button>
          <span class="line">|</span>
          <el-button
            @click="modifyClick(scope.$index)"
            type="text" size="medium"
            style="font-weight: 400">
            修改
          </el-button>
        </template>
      </el-table-column>
    </el-table>

      <!-- 添加用户 -->
      <el-dialog
        title="添加用户"
        :visible.sync="dialogVisible"
        width="90%">
        <add-role v-if="dialogVisible"/>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        </span>
      </el-dialog>
  </div>
</template>
<script>
import AddRole from './AddRole'
export default {
  name: 'TableView',
  props: {
    data: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      pop: {
        tableData: this.data,
      },
      input: '',
      dialogVisible: false, // 子组件载体
      multipleSelection: [], // 复选框
    }
  },
  components: {
    AddRole,
  },
  methods: {
    addRole() {
      /* 添加组织 */
      this.$notify({
        title: '警告',
        message: '该功能待定！',
        type: 'warning',
      })
    },
    modifyClick( index ) {
      /* 修改 */
      this.dialogVisible = true
      console.log(index)
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(() =>{
          done()
        })
        .catch( () => {})
    },
  },
}
</script>
<style lang="scss" scoped>
@import '~styles/default/table_view';
</style>